<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

<title>在线考试系统用户注册</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page"> 

<link rel="stylesheet" href="css/register.css" type="text/css" />
<script src="js/client_validate.js"></script>
</head>
<script type="text/javascript"> 
	function check(){ 
		userID = document.getElementById("userID").value ;
		if(userID.lenght<=0){
			alert("用户名不能为空"); 
			return false;
		}else{
			if(!(userID.length>=6&&userID.length<=30)){
				alert("用户名长度应在6-30之间"); 
				return false;
			} 
		}
		
		password = document.getElementById("password").value ;
		var rePassword = document.getElementById("rePassword").value ;
		
		if(!(password.length>=6&&password.length<=30)){
			alert("输入的密码不合理"); 
			return false;
		}else{
			if(password!=rePassword){
				alert("两次输入的密码不一致");
				return false;
			} 
		}
		  
		email = document.getElementById("email").value ;
		var reEmail = document.getElementById("reEmail").value ;
	
		if(!isEmail(email)){
			alert("邮箱地址输入不合法"); 
			return false;
		}else{
			if(email!=reEmail){
				alert("两次输入的邮箱地址不一致");
				return false;
			}
		} 
		
		name = document.getElementById("name").value ;

		sex = document.getElementById("sex").value ; 

		var terms =document.getElementById("terms") ; 
		if(!terms.checked){
			alert("只有接受了在线考试相关服务条款才能进行注册");
			return false;
		} 
	}
	
	function submitRegister(){ 
		return check();
	}


	function checkUserID(uid){
		userID = uid.value
		if(userID.lenght<=0){
			document.getElementById("userIDSpan").innerHTML = "<font color='red'>×用户名不能为空</font>"; 
			return false;
		}else{
			if(!(userID.length>=6&&userID.length<=30)){ 
				document.getElementById("userIDSpan").innerHTML = "<font color='red'>×用户名长度在6-30之间</font>";
				return false;
			} else{
				document.getElementById("userIDSpan").innerHTML = "<font color='green'>√正确</font>";
				return true;
			}
		}
	}
	
	function checkPassword(pw){
		password = pw.value;
		if(password.length>=6&&password.length<=30){
			document.getElementById("passwordSpan").innerHTML = "<font color='green'>√正确</font>";
		}else{
			document.getElementById("passwordSpan").innerHTML = "<font color='red'>×密码由6-30位字符组成</font>";
		}
	}

	function checkRePassword(rePw){  
		var val = rePw.value;
		if(password!=val){
			document.getElementById("rePasswordSpan").innerHTML = "<font color='red'>×两次输入的密码不一致</font>";
		}else{
			if(val.length>=6&&val.length<=30){
				document.getElementById("rePasswordSpan").innerHTML = "<font color='green'>√正确</font>";
			}else{ 
				document.getElementById("rePasswordSpan").innerHTML = "<font color='red'>×密码由6-30位字符组成</font>";
			}
		}
	}  
	// 校验是否是Email
	function isEmail(eml) { 
		var re = new RegExp("@[\\w]+(\\.[\\w]+)+$");
		return (re.test(eml)); 
	}
	function checkEmail(e_mail) {
		email = e_mail.value;
		if(isEmail(email)){
			document.getElementById("emailSpan").innerHTML = "<font color='green'>√正确</font>";
		}else{
			document.getElementById("emailSpan").innerHTML = "<font color='red'>×电子邮箱地址不合法</font>";
		}
	}

	function checkReEmail(re_e_mail) {
		var val = re_e_mail.value;
		if(isEmail(val)){
			if(email!=val){
				document.getElementById("reEmailSpan").innerHTML = "<font color='red'>×两次输入邮箱地址不一致</font>";
			}else{
				document.getElementById("reEmailSpan").innerHTML = "<font color='green'>√正确</font>";
			}
		}else{
			document.getElementById("reEmailSpan").innerHTML = "<font color='red'>×电子邮箱地址不合法</font>";
		}
	}
	
	var userID="";
	var password="";
	var email="";
	var name="";
	var sex=0;  
</script>
<script src="js/calendar3.js" type="text/javascript"></script>
<body >
<div align="center" style="margin-top: 50">
<div class="zc_t">
	<img src="images/zc_xx.gif"/>
</div>

<div class="zt_m">
	<h3>填写注册信息 </h3>
	<span>带<font color="red">*</font>为必填项</span>
</div>

<div class="zt_b">
<form action="registerUser.action" method="post" name="form1" onsubmit="return submitRegister();">
	<ul>
		<li>
			<span class="zc_name"> 用户名/ID<font color="red">*</font> </span>
			<input type="text" class="zc_text" id="userID" name="user.userID" value="${user.userID }" onblur="checkUserID(this)"/> 
			<span class="zc_tip" id="userIDSpan"> 中、英文、数字均可(注：用户名注册后不能更换)</span>
		</li>
		
		<li>
			<span class="zc_name"> 输入密码<font color="red">*</font> </span>
			<input type="password" class="zc_text" id="password" name="user.password" value="${user.password }" onblur="checkPassword(this)"/>
			<span class="zc_tip" id="passwordSpan"> 由6-30位字符组成，请使用英文字母、符号或数字。</span>
		</li>
		
		<li>
			<span class="zc_name"> 再次输入密码<font color="red">*</font> </span>
			<input type="password" class="zc_text" id="rePassword" name="rePassword" onblur="checkRePassword(this)"/>
			<span class="zc_tip"  id="rePasswordSpan">  为了确保您输入的密码正确，请再次输入密码</span>
		</li>
		
		<li>
			<span class="zc_name"> 电子邮件<font color="red">*</font>  </span>
			<input type="text" class="zc_text" id="email" name="user.email"  value="${user.email }"  onblur="checkEmail(this)"/>
			<span class="zc_tip" id="emailSpan"> 非常重要！这是找回密码的首选方式，请务必填写正确</span>
		</li>
		
		<li>
			<span class="zc_name"> 确认电子邮件<font color="red">*</font> </span>
			<input type="text" class="zc_text" id="reEmail" name="reEmail" onblur="checkReEmail(this)"/>
			<span class="zc_tip" id="reEmailSpan">  请再输入一遍上面输入的电子邮件地址</span>
		</li>
		
			<li>
			<span class="zc_name"> 真实姓名 </span>
			<input type="text" class="zc_text" id="name" name="user.name" value="${user.name}"  />
			<span class="zc_tip" id="nameSpan"> </span>
		</li>
		
		<li>
			<span class="zc_name"> 用户性别</span> 
			<span class="zc_text">
				<select name="sex" id="sex" class="zc_sel">
					<option value="1">男</option>
					<option value="0">女</option>
				</select>  
			 </span>
			 <span class="zc_tip" id="sexSpan"></span> 
		</li>
		 
		<li> 
 			<span class="zc_name"> 出生日期 </span>
			<input  class="zc_text"  type="text" id="control_date"  name="user.birthday"  value="${user.birthday }"  onclick="new Calendar().show(this);" readonly="readonly" />
			 <span class="zc_tip" id="birthdaySpan"> 
			 	<span class="zc_service" > 
					<input name="terms"  id="terms" type="checkbox" value="1" />
					<a target="_blank" href="termsOfService.html" >我接受线考试服务条款</a>
				</span> 
			 </span> 
		</li> 
	   <li>
			<span class="zc_name">  </span>
			<span class="zc_xz"> 
			<input height="25" type="image" src="images/zc_tj.gif"  style="padding-top: 10px"/> 
			<a href="login.jsp" style="text-decoration: none;" >
				<font size="4" color="blue" >直接登录</font>
			</a>
			</span>
		</li> 
	</ul>
</form>
</div> 
</div> 
</body>
</html> 
